<template>
    <div class="box" :style="{ backgroundColor: colorConfig.contentBackgroudColor, borderRadius: '6px' }">
        <div class="thCls">等待就诊</div>
        <div style="overflow-y: auto;overflow-x: hidden;" class="seamless-warp2">
            <table id="waitTable">
            </table>
        </div>

    </div>
</template>
<script>

export default {
    data() {
        return {
            colorConfig: {},
            tHeight: "250px"
        }
    },
    methods: {
        onResize: function () {
            this.tHeight = (window.innerHeight - 140 - 80) + "px"
            updateDivHeight();
        },
    },
    mounted() {
        this.colorConfig = this.GLOBAL.colorConfig;

        window.addEventListener("LOGIN_SUCCESS", (res) => {
            this.colorConfig = this.GLOBAL.colorConfig;
        });
        window.addEventListener("ON_RESIZE", this.onResize);
        window.addEventListener("WAIT_UPDATE", (res) => {
            setWaitTable();
        });

        setTimeout(() => {
            this.tHeight = (window.innerHeight - 140 - 80) + "px";
            updateDivHeight();
        }, 100);
        var alist = document.getElementsByClassName("seamless-warp2")[0];
        let isToTop = false;
        function delayInterval(t) {
            setTimeout(() => {
                alist.scrollTop += 1;
                let totalH = window.innerHeight - 140 - 80;
                if (alist.scrollTop + totalH + 1 > alist.scrollHeight) {//回到顶部
                    isToTop = true;
                    delayInterval(1000);
                    return;
                }
                if (isToTop) {
                    isToTop = false;
                    alist.scrollTop = 0;
                    delayInterval(1000);
                    return;
                }
                delayInterval();
            }, t ? t : 30);
        }

        function setWaitTable() {
            let data = window['queueObject']['waitQueue'];
            let arr = JSON.parse(JSON.stringify(data));
            updateTable(arr);
        }

        delayInterval(3000);
        setWaitTable();
    },
}

function updateDivHeight() {
    var alist = document.getElementsByClassName("seamless-warp2");
    if (alist) {
        var mya = alist[0];
        if (mya) {
            let totalH = window.innerHeight - 140 - 80;
            mya.style.height = totalH + "px";
        }
    }
}

function updateTable(arr) {
    let table = document.getElementById('waitTable');
    let cellHeight = 50;
    let htmlStr = "";
    let totalHeight = 0;
    let vIndex = 0;
    for (let i = 0; i < arr.length; i++) {
        var item = arr[i];
        let titleStr = `<tr>
                    <th colspan="2">${item.showTitle}</th>
                </tr>`;
        var newArr = [];
        totalHeight += cellHeight;
        for (let j = 0; j < item.players.length; j++) {
            var index = Math.floor(j / 2);
            if (!newArr[index]) {
                newArr[index] = [];
            }
            newArr[index].push(item.players[j]);
        }
        if (newArr.length) {
            htmlStr += titleStr;
        }
        let info = "";
        for (let k = 0; k < newArr.length; k++) {
            let color = k % 2 == 0 ? "background-color: rgba(255, 255, 255, 0.1);" : "";
            info += `<tr style="${color}height:70px;line-height:70px;">
                    <td style="${color}">${newArr[k][0].showTitle}</td>
                    <td style="${color}">${newArr[k][1] ? newArr[k][1].showTitle : ""}</td>
                </tr>`;
            totalHeight += cellHeight;
            vIndex++;
        }
        htmlStr += info;
    }
    if (!table) return;
    table.style.height = totalHeight + "px";
    table.innerHTML = htmlStr;
}

</script>
<style>
.thCls {
    font-size: 30px;
    height: 40px;
    line-height: 40px;
    font-weight: bold;
}

#waitTable {
    width: 100%;
    font-size: 25px;
    font-weight: bold;
    text-align: center;
}


::-webkit-scrollbar {
    width: 0;
    height: 0;
    background-color: transparent;
}
</style>